<template>
  <div class="knowledge-base-container">
    <!-- 左侧导航区域 -->
    <el-aside width="240px" class="aside">
      <el-menu
        default-active="activeMenu"
        class="el-menu-vertical-demo"
        background-color="#f5f7fa"
        text-color="#333"
        active-text-color="#409EFF"
        :unique-opened="true"
      >
        <!-- 修复了 key 的位置 -->
        <template v-for="menu in menuList" >
          <!-- 一级菜单：带子菜单 -->
          <el-submenu
            v-if="menu.children && menu.children.length"
            :index="menu.index"
            :key="menu.index"
          >
            <template #title>
              <i :class="menu.icon"></i>
              <span>{{ menu.title }}</span>
            </template>
            <el-menu-item
              v-for="child in menu.children"
              :key="child.index"
              :index="child.index"
              @click="handleMenuSelect(child)"
            >
              {{ child.title }}
            </el-menu-item>
          </el-submenu>

          <!-- 单项菜单 -->
          <el-menu-item
            v-else
            :key="menu.index"
            :index="menu.index"
            @click="handleMenuSelect(menu)"
          >
            <i :class="menu.icon"></i>
            <span>{{ menu.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>

    <!-- 右侧主要内容区域 -->
    <el-main class="main">
      <!-- 操作按钮区域 -->
      <div class="action-buttons">
        <div class="button-group">
          <!-- 上传按钮 -->
          <el-button type="primary" icon="el-icon-upload2" @click="handleUpload">上传</el-button>

          <!-- 新建文件夹按钮 -->
          <el-button plain icon="el-icon-folder-add" @click="handleNewFolder">新建文件夹</el-button>
        </div>

        <!-- 筛选 + 视图切换 -->
        <div class="filter-and-view">
          <el-select v-model="selectedFilter" placeholder="筛选条件" size="small">
            <el-option
              v-for="(item, index) in filterOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-button-group>
            <el-button icon="el-icon-s-grid" @click="viewType = 'grid'" title="网格视图"></el-button>
            <el-button icon="el-icon-s-operation" @click="viewType = 'list'" title="列表视图"></el-button>
          </el-button-group>
        </div>
      </div>

      <!-- 文件列表展示，根据 viewType 切换布局 -->
      <div class="file-list">
        <template v-if="viewType === 'grid'">
          <el-card
            v-for="(file, index) in fileList"
            :key="index"
            :body-style="{ padding: '10px' }"
            class="file-card"
          >
            <div slot="header" class="card-header">
              <strong>{{ file.title }}</strong>
            </div>
            <div class="card-body">
              <p><i class="el-icon-user-solid"></i> {{ file.author }}</p>
              <p><i class="el-icon-time"></i> {{ file.time }}</p>
              <p><i class="el-icon-document-copy"></i> {{ file.size }}</p>
              <div class="tags">
                <el-tag
                  v-for="(tag, tagIndex) in file.tags"
                  :key="tagIndex"
                  :type="tag.type"
                  size="mini"
                >{{ tag.label }}</el-tag>
              </div>
            </div>
          </el-card>
        </template>
        <template v-else>
          <el-table :data="fileList" border style="width: 100%">
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="author" label="作者"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="size" label="大小"></el-table-column>
            <el-table-column label="标签">
              <template slot-scope="scope">
                <el-tag
                  v-for="(tag, tagIndex) in scope.row.tags"
                  :key="tagIndex"
                  :type="tag.type"
                  size="mini"
                >{{ tag.label }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-download" @click="downloadFile(scope.row)">下载</el-button>
                <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteFile(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'KnowledgeBase',
  data() {
    return {
      activeMenu: '',
      selectedFilter: '最近修改',
      viewType: 'grid',
      // 菜单模拟数据
      menuList: [
        {
          index: '1',
          title: '我的项目',
          icon: 'el-icon-menu',
          children: [
            { index: '1-1', title: '项目A' },
            { index: '1-2', title: '项目B' },
            { index: '1-3', title: '项目C' }
          ]
        },
        {
          index: '2',
          title: '参考资料',
          icon: 'el-icon-document',
          children: [
            { index: '2-1', title: '技术文档' },
            { index: '2-2', title: '用户手册' }
          ]
        },
        {
          index: '3',
          title: '会议记录',
          icon: 'el-icon-notebook-2'
        },
        {
          index: '4',
          title: '培训资料',
          icon: 'el-icon-s-data'
        },
        {
          index: '5',
          title: '公共知识库',
          icon: 'el-icon-folder',
          children: [
            { index: '5-1', title: '公司制度' }
          ]
        }
      ],
      filterOptions: ['最近修改', '按名称排序', '按大小排序'],
      // 文件列表模拟数据
      fileList: [
        {
          title: '2023年第一季度报告',
          author: '李四',
          time: '今天 14:30',
          size: '3.5MB',
          tags: [
            { label: '市场分析', type: 'info' },
            { label: '2023Q3', type: 'success' },
            { label: '重要', type: 'warning' }
          ]
        },
        {
          title: '项目进度管理模板',
          author: '王五',
          time: '昨天 09:15',
          size: '1.2MB',
          tags: [
            { label: '模板', type: 'info' },
            { label: '项目管理', type: 'success' }
          ]
        },
        {
          title: '2023年度总结',
          author: '赵六',
          time: '1周前',
          size: '2.8MB',
          tags: [
            { label: '年度总结', type: 'info' }
          ]
        }
      ]
    };
  },
  methods: {
    handleMenuSelect(item) {
      console.log('选中菜单项:', item);
      this.activeMenu = item.index;
      // 这里可以根据菜单项加载对应文件数据
      // 示例：this.loadFilesByCategory(item.index)
    },
    downloadFile(file) {
      console.log('下载文件:', file.title);
    },
    deleteFile(file) {
      console.log('删除文件:', file.title);
    },
    handleUpload(){

    }
  }
};
</script>

<style scoped>
.knowledge-base-container {
  display: flex;
  height: calc(100vh - 60px); /* 自动占满剩余高度 */
}

.aside {
  background-color: #f5f7fa; /* 灰白色背景 */
  color: #333;
  height: 100%;
  border-right: 1px solid #e4e7ed;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
}

.main {
  flex: 1;
  padding: 20px;
  background-color: #ebeef5; /* 浅灰色背景 */
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-and-view {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.file-card {
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.file-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 16px;
}

.card-body p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.tags {
  margin-top: 10px;
}

@media (max-width: 768px) {
  .file-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
.button-group {
  display: flex;
  gap: 10px; /* 调整按钮之间的间距 */
}

.el-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px; /* 调整按钮的内边距 */
  font-size: 14px; /* 调整字体大小 */
}

.el-button i {
  margin-right: 5px; /* 图标与文字之间的间距 */
}

/* 自定义新建按钮样式 */
.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
  color: white;
}
/* 新建按钮 - 鼠标悬停 */
.el-button--primary:hover {
  background-color: #337ecc;
  border-color: #337ecc;
}

/* 新建按钮 - 按下时 */
.el-button--primary:active {
  background-color: #2b7fd6;
  border-color: #2b7fd6;
  transform: translateY(1px); /* 模拟按下效果 */
}
/* 自定义上传按钮样式 */
.el-button--primary.is-plain {
  background-color: transparent;
  border-color: #409EFF;
  color: #409EFF;
}

/* 上传按钮 - 鼠标悬停 */
.el-button--primary.is-plain:hover {
  background-color: #ecf5ff;
  border-color: #337ecc;
  color: #337ecc;
}

/* 上传按钮 - 按下时 */
.el-button--primary.is-plain:active {
  background-color: #dbeafe;
  border-color: #2b7fd6;
  color: #1a73e8;
  transform: translateY(1px);
}
/* 自定义新建文件夹按钮样式 */
.el-button.is-plain {
  background-color: transparent;
  border-color: #DCDFE6;
  color: #606266;
}
/* 新建文件夹按钮 - 鼠标悬停 */
.el-button.is-plain:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
  color: #333;
}

/* 新建文件夹按钮 - 按下时 */
.el-button.is-plain:active {
  background-color: #ebeef5;
  border-color: #b1b4b8;
  color: #222;
  transform: translateY(1px);
}
</style>
